import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import styles from './style.module.scss';
class BreadcrumbItem extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    render() {
        /**
         * 面包屑实例:  首页/first/second
         * @param {object} first  格式：{name: 'xxx',path:'/xxx'}
         * @param {string} second  
         */
        const { first , second , history } = this.props;
        return (
            <div className={styles['breadcrumb']}>
                <div onClick={(()=>{
                        history.push({
                            pathname: '/',
                        })
                    })}>
                    <span className={styles['pageText']}>首页</span>
                    <span className={styles['sub']}>
                        <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_arrow_right_nav%402x.png" alt=""/>
                    </span>
                </div>
                {  
                    (()=>{
                        if (first) {
                            return (
                                <div onClick={(()=>{
                                        history.push({
                                            pathname: first['path'],
                                        })
                                    })}>
                                    <span className={styles['pageText']}>{first['name']}</span>
                                    <span className={styles['sub']}>
                                        <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_arrow_right_nav%402x.png" alt=""/>
                                    </span>
                                </div>
                            )
                        }
                    })()
                }
                <div>
                    <span className={styles['pageText']}>{second || ''}</span>
                    <span className={styles['sub']}>
                        <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_arrow_right_nav%402x.png" alt=""/>
                    </span>
                </div>
            </div>
        )
    }
    componentDidMount (){
        
    }
}

const mapState = (state) => ({

});

const mapDispatch = (dispatch) => ({

});


export default connect(mapState, mapDispatch)(withRouter(BreadcrumbItem));